<template>
  <n-card 
    :bordered="false" 
    class="task-card mb-4 shadow-sm hover:shadow-md transition-shadow"
    :class="{
      'border-l-4 border-red-500': task.is_important,
      'opacity-70': task.status === 2
    }"
  >
    <template #header>
      <div class="flex justify-between items-start">
        <div class="flex-1">
          <h3 class="text-lg font-semibold mb-1 flex items-center">
            {{ task.title }}
            <n-tag 
              v-if="task.is_important" 
              type="error" 
              size="small" 
              class="ml-2"
            >
              重要
            </n-tag>
            <n-tag 
              v-if="task.is_my_day" 
              type="primary" 
              size="small" 
              class="ml-2"
            >
              我的一天
            </n-tag>
          </h3>
          <div class="text-sm text-gray-500 dark:text-gray-400">
            {{ task.group_name || '未分组' }}
            <span v-if="task.due_date" class="ml-2">
              截止日期: {{ task.due_date }}
            </span>
          </div>
        </div>
        <n-dropdown>
          <n-button text size="small">
            <template #icon>
              <n-icon size="16">
                <EllipsisVerticalOutline />
              </n-icon>
            </template>
          </n-button>
          <template #options>
            <n-dropdown-option @click="toggleMyDay">
              <template #icon>
                <n-icon size="16">
                  <CalendarOutline />
                </n-icon>
              </template>
              {{ task.is_my_day ? '取消我的一天' : '标记为我的一天' }}
            </n-dropdown-option>
            <n-dropdown-option @click="toggleImportant">
              <template #icon>
                <n-icon size="16">
                  <StarOutline />
                </n-icon>
              </template>
              {{ task.is_important ? '取消重要' : '标记为重要' }}
            </n-dropdown-option>
            <n-dropdown-option @click="$router.push(`/task/${task.task_id}`)">
              <template #icon>
                <n-icon size="16">
                  <CreateOutline />
                </n-icon>
              </template>
              查看详情
            </n-dropdown-option>
            <n-dropdown-option @click="deleteTask" type="error">
              <template #icon>
                <n-icon size="16">
                  <TrashOutline />
                </n-icon>
              </template>
              删除任务
            </n-dropdown-option>
          </template>
        </n-dropdown>
      </div>
    </template>
    
    <div v-if="task.description" class="text-gray-700 dark:text-gray-300 mb-4">
      {{ task.description }}
    </div>
    
    <div class="flex justify-between items-center">
      <n-select 
        v-model:value="status" 
        size="small" 
        @update:value="updateStatus"
        :options="statusOptions"
        class="w-32"
      />
      <n-button 
        size="small" 
        type="primary" 
        @click="$router.push(`/task/${task.task_id}`)"
      >
        查看详情
      </n-button>
    </div>
  </n-card>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Task, TaskStatus } from '@/types'
import { useTaskStore } from '@/store/task'
import { 
  EllipsisVerticalOutline, 
  CalendarOutline, 
  StarOutline, 
  CreateOutline, 
  TrashOutline 
} from '@vicons/ionicons5'

// 组件属性
const props = defineProps<{
  task: Task
}>()

// 任务状态选项
const statusOptions = [
  { label: '新任务', value: 0 },
  { label: '进行中', value: 1 },
  { label: '已完成', value: 2 }
]

// 状态
const status = ref<TaskStatus>(props.task.status)

// 任务store
const taskStore = useTaskStore()

// 监听任务状态变化
watch(() => props.task.status, (newStatus) => {
  status.value = newStatus
})

// 更新任务状态
const updateStatus = async () => {
  await taskStore.updateTask(props.task.task_id, { status: status.value })
}

// 切换重要标记
const toggleImportant = async () => {
  await taskStore.updateTask(props.task.task_id, { 
    is_important: !props.task.is_important 
  })
}

// 切换我的一天标记
const toggleMyDay = async () => {
  await taskStore.updateTask(props.task.task_id, { 
    is_my_day: !props.task.is_my_day 
  })
}

// 删除任务
const deleteTask = async () => {
  await taskStore.deleteTask(props.task.task_id)
}
</script>

<style scoped>
.task-card {
  transition: all 0.3s ease;
}

.task-card:hover {
  transform: translateY(-2px);
}
</style>
